<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        E[attr]选取带有某个属性的元素
        E[attr='value']选取带有某个属性和对应值的元素
        E[attr~='value']选取带有某个属性且属性中的值要包含指定的词汇的元素
        E[attr^='value']选取带有某个属性且要以指定的值开头的元素
        E[attr$='value']选取带有某个属性且要以指定的值结尾的元素
        E[attr*='value']选取带有某个属性且包含指定的值的元素
        E[attr|='value']选取带有某个属性且等于指定的值或者value-开头的元素
        */
        input[class]{
            color: red;
        }
        a[target]{
            color: red;
        }

        input[class='user']{
            font-size: 20px;
        }

        input[class~='pwd']{
            color: blue;
        }


        input[class^='pwd']{
            color: green;
        }

        input[class$='user']{
            color: pink;
        }  
        input[class*='pwd']{
            color: purple;
        }  

        input[class|='pwd']{
            color: lawngreen;
        }  
    </style>
</head>
<body>
    <input type="text" class="user" placeholder="user">
    <input type="text" class="pwd" placeholder="pwd">
    <input type="text" class="pwd user" placeholder="pwd user">
    <input type="text" class="pwd-user" placeholder="pwd-user">
    <input type="text" class="user pwd " placeholder="user pwd">
    <input type="text" class="user-pwd " placeholder="user-pwd">
    <input type="text" class="aapwdbbb " placeholder="aapwdbbb">
    <input type="text" class="pwd_" placeholder="pwd_">
    <input type="text" class="pwd-aaaa bbb" placeholder="pwd-aaaa bbb">
    <a href="https://www.baidu.com" target="_blank">百度一下</a>
    <a href="https://www.baidu.com">百度一下</a>
</body>
</html>